<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>登录页</title>
    <link th:href="@{/img/Bandit.ico}" rel="icon">
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet">
    <link th:href="@{/css/login.css}" rel="stylesheet">
    <style>
        body{
            background-image: url("https://gitee.com/lds0826/blog-image/raw/master/webImg/202112061430326.jpg");
        }

        .layui-elem-field{
            background: rgba(48, 219, 124, 0.9);
            padding: 20px;
            margin: 150px;
            border: rgba(24,243,255,0.76) 2px solid;
            border-radius: 5px;
        }
        /* 覆盖原框架样式 */
        .layui-elem-quote {
            background-color: inherit !important;
        }

        .layui-input,
        .layui-select,
        .layui-textarea {
            background-color: inherit;
            padding-left: 30px;
        }
        .layui-panel{
            margin-top: 50px;
            margin-bottom: 50px;
            margin-left: auto;
            margin-right: auto;
            height: 300px;
            width: 400px;
            padding-top: 20px;

        }
    </style>
</head>
<body>
<div class="layui-main">
    <fieldset class="layui-elem-field zyl_mar_02">
        <legend style="font-size: 32px;font-weight: bolder;color: rgba(0,0,0,0.76);text-decoration: rgba(55,141,255,0.76);text-shadow: 2px 2px #ef4e4e;">欢迎登陆 - 软件工程专业管理系统登陆界面</legend>
    <div class="layui-panel layui-field-box">
        <div class="layui-row layui-col-space15">
            <form class="layui-form zyl_pad_01" th:action="@{/LoginConfirm}" method="post">
                <div class="layui-col-sm12 layui-col-md12">
                    <div class="layui-form-item">
                        <input type="text" name="username" lay-verify="required|userName" autocomplete="off"
                               placeholder="账号" class="layui-input">
                        <i class="layui-icon layui-icon-username zyl_lofo_icon"></i>
                    </div>
                </div>

                <div class="layui-col-sm12 layui-col-md12">
                    <div class="layui-form-item">
                        <input type="password" name="password" lay-verify="required|pass" autocomplete="off"
                               placeholder="密码" class="layui-input">
                        <i class="layui-icon layui-icon-password zyl_lofo_icon"></i>
                    </div>
                </div>

                <div class="layui-col-sm12 layui-col-md12">
                    <button class="layui-btn layui-btn-fluid" lay-submit="" lay-filter="demo1">立即登录</button>
                </div>
            </form>
        </div>
    </div>
    </fieldset>
</div>


<script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/layui/layui.js}"></script>
<script type="text/javascript" th:src="@{/assembly/jqarticle/jparticle.min.js}"></script>
<script>
    layui.use(['carousel', 'form'], function () {
        var carousel = layui.carousel,
            form = layui.form;

        //自定义验证规则
        form.verify({
            userName: function (value) {
                if (value.length < 3) {
                    return '账号至少得3个字符';
                }
            },
            pass: [/^[\S]{3,18}$/, '密码必须3到18位，且不能出现空格'],
            content: function (value) {
                layedit.sync(editIndex);
            }
        });

    });
</script>

<div th:replace="~{commons/common::pubScript}"></div>
</body>
</html>